<script setup lang="ts">
import {ref} from 'vue';
import {CaretRightOutlined} from '@ant-design/icons-vue';
import {message} from "ant-design-vue";
import {updateUserPwd} from "@/api/user/user";
import {ECode} from "@/util/commonUtil";

const activeKey = ref(['1']);
const customStyle = 'background: #f7f7f7;border-radius: 4px;margin-bottom: 24px;border: 0;overflow: hidden';

const props = defineProps({
  userInfo: {
    type: Object,
    default: () => {
    }
  }
})
const user = ref<any>(props.userInfo)
const labelCol = {style: {width: '80px'}};
const wrapperCol = {span: 14};

function updateUserPwdMethod() {
  if (!user.value.oldPwd) {
    message.warning('请输入旧密码')
    return
  }
  if (!user.value.newPwd) {
    message.warning('请输入新密码')
    return
  }
  if (!user.value.newPwd2) {
    message.warning('请输入确认密码')
    return
  }
  if (user.value.oldPwd === user.value.newPwd) {
    message.warning('新旧密码不能一致')
    return
  }
  if (user.value.newPwd !== user.value.newPwd2) {
    message.warning('两次输入的密码不一致')
    return
  }
  let params = new URLSearchParams();
  params.append("oldPwd", user.value.oldPwd);
  params.append("newPwd", user.value.newPwd);
  updateUserPwd(params).then((response:any) => {
    if (response.code == ECode.SUCCESS) {
      message.success(response.data)
    } else {
      message.error(response.message)
    }
  })
}
</script>

<template>
  <section class="passwordEdit">
    <a-form
        :model="user"
        layout="horizontal"
        class="max-w-[600px]"
        :label-col="labelCol"
        :wrapper-col="wrapperCol">
      <a-collapse
          v-model:activeKey="activeKey"
          :bordered="false"
          style="background: rgb(255, 255, 255)"
      >
        <template #expandIcon="{ isActive }">
          <CaretRightOutlined :rotate="isActive ? 90 : 0"/>
        </template>
        <a-collapse-panel key="1" header="修改密码须知" :style="customStyle">
          <p>此修改密码功能
            <i class="not-italic text-rose-400">仅适用于账号和密码登录</i>
          </p>
          <p>对于<i class="not-italic text-rose-400 ml-0.5 mr-0.5">第三方登录</i>的账号，
            <i class="not-italic text-rose-400">无法进行密码修改</i>
          </p>
        </a-collapse-panel>
      </a-collapse>
      <a-divider>
        <span class="text-[14px] text-gray-300">修改密码</span>
      </a-divider>
      <a-form-item label="旧密码" name="oldPwd"
                   :rules="[{ required: true, message: '请输入旧密码!' }]">
        <a-input v-model:value.trim="user.oldPwd" placeholder="请输入旧密码"/>
      </a-form-item>
      <a-form-item label="新密码" name="newPwd"
                   :rules="[{ required: true, message: '请输入新密码!' }]">
        <a-input v-model:value.trim="user.newPwd" placeholder="请输入新密码"/>
      </a-form-item>
      <a-form-item label="重复密码" name="newPwd2"
                   :rules="[{ required: true, message: '请输入重复密码!' }]">
        <a-input v-model:value.trim="user.newPwd2" placeholder="请输入重复密码"/>
      </a-form-item>
      <a-form-item :wrapper-col="{ offset: 8, span: 16 }">
        <a-button html-type="submit" type="primary" @click="updateUserPwdMethod">修改密码</a-button>
      </a-form-item>
    </a-form>
  </section>
</template>

<style scoped lang="less">

</style>
